<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <title>考试报名官网</title>
    <link rel="icon" href="../jkun.jpg">
</head>
<style>
    .el-main {
        padding: 0;
    }

    <!--
    布局样式-- >
    .el-row {
        margin-bottom: 20px;

    }

    .el-col {
        border-radius: 4px;
    }


    .bg-purple {
        background: #d3dce6;
    }

    .bg-purple-light {
        background: #e5e9f2;
    }

    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }

    .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
    }

    /*    */
    .p_title {
        font-size: 20px;
    }

    p {
        margin: 0;
        padding: 0;
    }

    .a_button {
        text-indent: 70px;
        display: block;
        padding: 10px;
        border-radius: 5px;
        margin-bottom: 5px;
        /*width: 250px;*/
        /*height: 50px;*/
        background: #99a9bf;
        text-decoration: none;
        color: white;
    }

    /*    轮播图*/
    .el-carousel__item h3 {
        color: #475669;
        font-size: 14px;
        opacity: 0.75;
        line-height: 150px;
        margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
    }

    .el-menu--horizontal > .el-menu-item {
        float: left;
        height: 45px;
        margin: 0 30px;
        border-bottom: 2px solid transparent;
        color: #909399;
        text-align: center;

    }

    .el-menu-item > a {
        text-decoration: none;
        position: relative;
        top: -8px;
    }

    .el-menu.el-menu--horizontal {
        width: 1200px;
        margin: 0 auto;
    }
</style>
<body>
<div>
    <el-container>

        <el-header style="width: 1200px;margin: 0 auto ;height: auto;padding: 0">
            <!--            <img src="./imgs/logo.jpg" alt="">-->
            <div>
                <h1 style="color: #003E7D">考试报名系统</h1>

            </div>
            <div style="height: 45px;border-bottom: solid 3px #003E7D;">
                <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"
                         background-color="#E7E8EB" text-color="#003E7D">
                    <el-menu-item index="1"><a href="/">首页</a></el-menu-item>
                    <el-menu-item index="2"><a href="/message.html">公示公告</a></el-menu-item>
                    <el-menu-item index="3"><a href="/notice.html">考试项目</a></el-menu-item>
                    <el-menu-item index="4"><a href="">考试报名</a></el-menu-item>
                    <el-menu-item index="5"><a href="">成绩查询</a></el-menu-item>
                    <el-menu-item index="6"><a href="">准考证打印</a></el-menu-item>
                    <el-menu-item index="7"><a href="">考试论坛</a></el-menu-item>
                </el-menu>
            </div>

        </el-header>
        <el-main style="width: 1200px;margin: 0 auto;height: auto">
            <div style="height: 30px"></div>
            <el-carousel height="300px">
                <el-carousel-item v-for="item in arr">
                    <img :src="item" alt="" width="100%" height="100%">
                </el-carousel-item>
            </el-carousel>

            <div style="width: 1190px;margin: 0 auto ;height: 1190px;padding: 0">
                <div style="height: 30px"></div>

                <div style="border-top: solid 3px #003E7D;height: 60px;line-height: 60px;"><a href="">公示公告</a><span>|
                </span>
                    <a href="" target="_blank" id="JKDiv_DEF" class="Selected">考试资讯</a></div>
                <!-- <el-row :gutter="20">
                     <el-col :span="16" style="padding: 0">
                         <div class="grid-content bg-purple">
                             <div style="border-top: solid 3px #003E7D;">
                                 <h1>公示公告</h1>
                                 <div style="height: 500px">
                                     以下是内容
                                 </div>
                             </div>
                             <div style="border-top: solid 3px #003E7D;">
                                 <h1>考试项目</h1>
                                 <div style="height: 500px">
                                     以下是内容
                                 </div>
                             </div>
                         </div>
                     </el-col>
                     <el-col :span="8" style="padding: 0">
                         <div class="grid-content bg-purple" style="height: auto">
                             <div>
                                 <h1>考生服务</h1>
                             </div>
                             <a href="" class="a_button" style="background-image: url(./imgs/banner_01.png);background-repeat: no-repeat">
 &lt;!&ndash;                                <i class="el-icon-user-solid" style="float:left;width: 50px;height: 50px"></i>&ndash;&gt;
                                 <p class="p_title">咨询电话</p>
                                 <p class="p_content">ENTRY</p>
                             </a>
                             <a href=""  class="a_button" style="background-image: url(./imgs/banner_02.png);background-repeat: no-repeat">
                                 <p class="p_title">注册/修改</p>
                                 <p class="p_content">REGISTER / MODIFY USER</p>
                             </a>
                             <a href=""  class="a_button" style="background-image: url(./imgs/banner_03.png);background-repeat: no-repeat">
                                 <p class="p_title">找回已报名的帐号</p>
                                 <p class="p_content">RETRIEVE ACCOUNT</p>
                             </a>
                             <a href=""  class="a_button" style="background-image: url(./imgs/banner_05.png);background-repeat: no-repeat">
                                 <p class="p_title">补办成绩证明</p>
                                 <p class="p_content">TRANSCRIPT COPY RE-ORDER</p>
                             </a>
                             <a href=""  class="a_button " style="background-image: url(./imgs/banner_06.png);background-repeat: no-repeat">
                                 <p class="p_title">快速打印准考证</p>
                                 <p class="p_content">PRINT TICKET</p>
                             </a>
                         </div>
                     </el-col>

                 </el-row>-->
            </div>

        </el-main>
        <el-footer>
            <hr>
            <div style="height: 50px;width: 100%;background-color: rgb(244,244,244);text-align: center">
                <p>Author：xiangyu 武汉东湖学院 计算机科学与技术四班 毕业设计 </p>
            </div>

        </el-footer>
    </el-container>
</div>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
    let v = new Vue({
        el: "body>div",
        data: {
            activeIndex: '1',
            activeIndex2: '1',
            arr: ['imgs/logo1.jpg', 'imgs/2.jpg'],
            input: ''
        },
        methods: {
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            }
        }
    })
</script>
</body>
</html>